import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';
import {CopyToClipboard} from 'react-copy-to-clipboard';


//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'ConfirmDialog';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});

    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderConfirmDialog() {
        return (
            <div className={this.store.visible ? 'confirm-mask fade-in' : 'confirm-mask fade-out'}
                 onClick={(e) => this.store.closeDialog(e)}>
                <div className="confirm-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="confirm-header">
                        <p>{this.store.title || '确认'}</p>
                        <span onClick={(e) => this.store.closeDialog(e)}>
                            <ReIcon icon="window_closes"/>
                        </span>
                    </div>
                    <div className="confirm-content">
                        {
                            !this.store.hideCancel &&
                            <span className="icon-wrapper">
                                <ReIcon icon="prompt_caveat" className="icon"/>
                            </span>
                        }
                        {
                            this.store.showIcon &&
                            <span className="icon-wrapper">
                                <ReIcon icon="prompt_caveat" className="icon"/>
                            </span>
                        }
                        <div className="tips-wrapper">
                            <p className="tips">
                                {this.store.tips}
                            </p>
                            {
                                this.store.copy &&
                                <CopyToClipboard id="copy" text={this.store.subTips}>
                                    <div className="sub-tips">邮箱：{this.store.subTips}</div>
                                </CopyToClipboard>
                            }
                            {
                                !this.store.copy && this.store.subTips &&
                                <p className="sub-tips">
                                    {this.store.subTips}
                                </p>
                            }
                        </div>

                    </div>
                    <div className="confirm-footer">
                        {/*{*/}
                            {/*!this.store.hideCancel &&*/}
                            {/*<ReButton*/}
                                {/*onClick={(e) => this.store.closeDialog(e)}*/}
                                {/*className="cancel"*/}
                                {/*label={this.store.cancelBtnText}*/}
                            {/*/>*/}
                        {/*}*/}
                        <ReButton
                            onClick={(e) => this.store.confirmDialog(e)}
                            className={this.store.confirmBlue ? 'confirm blue' : 'confirm'}
                            label={this.store.confirmBtnText}/>
                    </div>
                </div>
            </div>
        );
    }

    render() {

        return (
            <div className="orin-s-confirmdialog-root">
                {this.renderConfirmDialog()}
            </div>
        );
    }
}